<template>
  <div class="app-container" id="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="">
      <el-form-item label="">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="queryParams.dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item label="填表人" prop="filled">
        <el-input v-model="queryParams.filled"  autocomplete="off" size="small" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="填表日期" prop="createTime">
        <el-date-picker clearable v-model="queryParams.createTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择导出日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
<!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--        <el-button type="primary"  plain icon="el-icon-plus" size="mini" @click="handleExport" v-hasPermi="['his:patient:export']" >导出</el-button>-->
        <el-button type="primary"  plain icon="el-icon-plus" size="mini" @click="handleExport">导出</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

<!--    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"  plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['his:patient:add']" >新增</el-button>
      </el-col>
            <el-col :span="1.5">
              <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="multiple" @click="handleProcess" v-hasPermi="['his:patient:process']">审核</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['his:attribute:batch']">批量上传结果</el-button>
            </el-col>
    </el-row>-->
    <el-table :data="tableData" border style="width: 600" :header-cell-style="headerCellStyle">
      <el-table-column prop="name" label="ID号" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.ID" autocomplete="off" size="small" placeholder="请输入ID号"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="登记日期" align="center" >
        <template slot-scope="scope">
          <el-date-picker type="date" placeholder="选择日期" v-model="scope.row.date"></el-date-picker>
        </template>
       </el-table-column>

      <el-table-column prop="name" label="姓名" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" autocomplete="off" size="small" placeholder="请输入姓名"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="现住地址" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.address" autocomplete="off" size="small" placeholder="请输入地址"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="tel" label="联系电话" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.tel" autocomplete="off" size="small" placeholder="请输入联系电话"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="实验室筛查" align="center">
        <el-table-column prop="type_lsc" label="" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.type_lsc" placeholder="筛查类型" clearable>
              <el-option v-for="dict in dict.type.his_type" :key="dict.value" :label="dict.label"
                         :value="dict.value" />
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="srqq" label="衰弱前期" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.srqq"  value="srqq" @change="handleCheck(scope.$index, scope.row)" :checked="srqqChecked" ref="srqqCheckbox"/>
          </template>
        </el-table-column>
        <el-table-column prop="sr" label="衰弱" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.sr" value="sr"  @change="handleCheck(scope.$index, scope.row)" ref="srCheckbox"/>
          </template>
        </el-table-column>
        <el-table-column prop="jsz" label="肌少症" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.jsz" />
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="老年综合评估" align="center">
        <el-table-column prop="type_lnpg" label="" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.type_lnpg" placeholder="筛查类型" clearable>
              <el-option v-for="dict in dict.type.his_type" :key="dict.value" :label="dict.label"
                         :value="dict.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="lnpg_zc" label="正常" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.lnpg_zc" @change="handleCheck(scope.$index, scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="lnpg_zhz" label="老年综合症" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.lnpg_zhz" @change="handleCheck(scope.$index, scope.row)" />
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="临床处理" align="center">
        <el-table-column prop="mzzl" label="门诊治疗" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.mzzl"  />
          </template>
        </el-table-column>
        <el-table-column prop="zhzl" label="综合治疗" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.zhzl" />
          </template>
        </el-table-column>
        <el-table-column prop="zkzl" label="专科治疗" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.zkzl" />
          </template>
        </el-table-column>
        <el-table-column prop="yyjh" label="医养结合" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.yyjh" />
          </template>
        </el-table-column>
        <el-table-column prop="jjyy" label="居家颐养" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.jjyy" />
          </template>
        </el-table-column>
        <el-table-column prop="clinicalOther" label="其他" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.clinicalOther" autocomplete="off" size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="clinicalRecorder" label="随访人" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.clinicalRecorder" autocomplete="off" size="small"></el-input>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" plain @click="delmembers(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
<!--    <i class="el-icon-circle-plus-outline" @click="addmembers"></i>-->
    <el-button type="primary"  @click.native="addmembers" class="mt-3" size="small" icon="el-icon-plus">新 增</el-button>
    <el-button type="success"  @click.native="submitForm" class="mt-3" size="small">确 定</el-button>
  </div>
</template>

<script>


import { listAnalysis } from '@/api/his/analysis'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import { addLsrPatient } from '@/api/his/patient'
import { getUserProfile } from '@/api/system/user'

export default {
  name: 'jsz_screening',
  dicts: ['his_type'],
  data() {
    return {
      checkList: [],
      srqqChecked:false,
      srChecked:false,
      tableData: [],
      // 查询参数
      queryParams: {
        dateRange:[],
        filled:'',
        createTime:'',
        deptName:''
      },
      // 日期范围
      //dateRange: [],
    }
  },

  created() {
    this.getUser();
  },
  mounted() {
  },
  methods: {
    handleCheck(index,row,e){
      //console.log(index,'index')
      //console.log(JSON.stringify(row),'row')

      //console.log(event.target.checked,'e')
      //console.log(event)

   /*    if(!this.srqqChecked){
        if(row.srqq){
          if( row.sr){
            row.sr = false
          }
        }
        this.srqqChecked = true
      }else{
        if(row.sr){
          row.srqq = false;
          this.srqqChecked = false;
        }else{
          row.sr = true;
        }
      } */

    },

    addmembers() {
      console.log('与承租户同户籍成员');
      var length = this.tableData.length;
      this.tableData.push(
        {
          id: parseInt(length),
          //date: '',
          //name: '',
          //address: '',
          //tel: '',
          //type_lsc: '',
        })
    },
    delmembers(index, row) {
      var that = this;
      //点击确定的操作(调用接口)
      for (var i = 0; i <that.tableData.length; i++) {
        if (row.id == that.tableData[i].id) {
          that.tableData.splice(i, 1);
          // this.$message({ message: '删除成功', duration: 2000, type: 'success' });
        }
      }

     /*  this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //点击确定的操作(调用接口)
        for (var i = 0; i <that.tableData.length; i++) {
          if (row.id == that.tableData[i].id) {
            that.tableData.splice(i, 1);
            // this.$message({ message: '删除成功', duration: 2000, type: 'success' });
          }
        }
      }).catch(() => {
        //点取消的提示
        return;
      }); */
    },

    //保存
    submitForm()
    {
      let _this = this;
      let data = {
        list: _this.tableData,
      }
      //console.log(data,'data')
      if(_this.tableData.length>0){
        addLsrPatient(_this.tableData).then(response => {
          //console.log('response: '+JSON.stringify(response))
          this.$modal.msgSuccess("新增成功");
        });
      }else{
        this.$modal.msgWarning("请填写数据后再提交！");
      }
      //_this.tableData.splice(0, _this.tableData.length);

    },

    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      /**
       * 合并：基本信息（姓名、年龄、家乡）单元格【通过行与列的索引来合并】
       * */
      /* let colArr = [1, 2];
      if (colArr.includes(columnIndex)) {
        if (rowIndex == 0) {
          // 把第1列第0行和第2列第0行的单元格隐去
          return { display: "none" };
        }
      }
      if ((columnIndex == 0) & (rowIndex == 0)) {
        // 把第0列第0行的单元格横向延伸，补上刚刚隐去的单元格位置，并上个色
        this.$nextTick(() => {
          document.querySelector(`.${column.id}`).setAttribute("colspan", "3");
        });
        return { background: "pink" };
      } */
      /**
       * 合并：重要信息--->公开重要信息--->爱好性格单元格 【通过单元格的文字内容来合并】
       * */
      if (column.label == "性格") {
        return { display: "none" };
      }
      if (column.label == "爱好&性格") {
        this.$nextTick(() => {
          document.querySelector(`.${column.id}`).setAttribute("colspan", "2");
        });
        return { background: "orange" }; // 不加这个也行，加了只是为了更好区分
      }

      /**
       * 重要！重要！重要！
       *    我们想要合并表头的单元格，需要先找到对应单元格
       *    可以通过列column对象的label或者行与列索引来找到，找到以后进行隐藏或合并
       *    也可以遍历行row数组找，不过会麻烦一些，个人建议通过column来找
       * */
      // 通过column找
      if (column.label == "实验室筛查") {
        return { background: "#e1ebfc" };
      }
      // 通过row找
      for (const item of row) {
        if (item.label == "临床处理") {
          this.$nextTick(() => {
            document.querySelector(`.${item.id}`).style.background = "#e5e1fc";
          });
          break;
        }
      }
    },

    //初始化月份选项
    initSelectMonth(month) {
      this.queryParams.month = month;
      this.month = []
      for (let i = 1; i <= 12; i++) {
        this.month_range.push({ value: i, label: i })
      }
    },

    /** 分析操作 */
    handleQuery() {
      //console.log('queryParma',JSON.stringify(this.queryParams))
      this.getAnalysis();
    },
    getAnalysis(){
      this.loading = true;
      if(this.queryParams.month!=''){
        let myData = new Date() //获取当前日期
        let month = myData.getFullYear()
        this.queryParams.startTime = month +'-'+this.queryParams.month+'-01 00:00:00';//this.queryParams.rangeTime[0];
        this.queryParams.endTime = month +'-'+this.queryParams.month+'-31 23:59:59';//this.queryParams.rangeTime[1];
        listAnalysis(this.queryParams).then(response => {
          this.dataForm.kspg = response.kspg;
          this.loading = false;
        });
      }else{
        this.$modal.msgWarning("请选择时间范围");
      }
    },
    async handleExport() {
      //console.log(JSON.stringify(this.queryParams));
    if(this.queryParams.dateRange.length==0){
        this.$modal.msgWarning("请先选择时间范围");
        return;
      }
    if(this.queryParams.filled==''){
      this.$modal.msgWarning("请填写填表人");
      return;
    }
    if(this.queryParams.createTime==''){
      this.$modal.msgWarning("请填写填表日期");
      return;
    }

      const loading = this.$loading({
        lock: true,
        text: '导出中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.2)'
      });

      const baseURL = process.env.VUE_APP_BASE_API;
      const api ='/his/analysis/jsz_screening/export';
      this.queryParams.dateRange = this.queryParams.dateRange[0]+'&'+this.queryParams.dateRange[1];
      var url = baseURL + api
      axios({
        method: 'post',
        url: url,
        responseType: 'blob',
        params: {query: this.queryParams}, //{jsonParam:this.dataForm.kspg},
        headers: { Authorization: "Bearer " + getToken() },
      }).then(res =>{
          loading.close();
          const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
          let href = URL.createObjectURL(blob)
          window.open(href)
        }
      )

      //清空条件
      this.queryParams.dateRange = null;
      this.queryParams.createTime = '';
      this.queryParams.filled = '';
    },

    openImportTable(){
      this.$modal.msg("功能在开发中,敬请期待...")
    },
    /** 重置操作 */
    resetQuery() {
      //this.resetForm("queryForm");
      this.queryParams.dateRange = null;
    },
    getUser() {
      getUserProfile().then(response => {
        this.queryParams.deptName = response.data.dept.deptName;
      });
    },
  }
}
</script>

<style lang="scss">
#app-container .el-collapse-item__header{
  color: #409EFF !important;
  font-size: 15px !important;
}
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
#app-container .plain{
  color: #409EFF !important;
  font-size: 17px;
}

#app-container .el-input__inner {
  padding: 0 5px !important;
}
#app-container .el-table .cell {
  padding: 0 2px !important;
}
#app-container .el-table--medium .el-table__cell {
  padding: 2px 0 !important;
}
#app-container .el-icon-date{
  display: none !important;
}
</style>
